<template>
  <view
    class="content common_bg"
    :style="{
      backgroundImage: `url(${$img('/static/img/global_page_bg.png')})`
    }"
  >
    <uni-nav-bar
      left-icon="left"
      title="发货记录"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="tab-list">
      <view
        @click="getlist(i + 1)"
        v-for="(item, i) in arr"
        :key="i"
        class="tab-list-item"
        :class="{
          active: show == i + 1
        }"
      >
        {{ item }}

        <image
          v-if="show == i + 1"
          class="arrow"
          :src="$img('/static/img/tab_arrow.png')"
          mode="scaleToFill"
        />
      </view>
    </view>
    <!-- <view class="head">
      <view
        class="status_bar"
        :style="'height:' + statusBarHeight + 'px;'"
      ></view>
      <view class="header_title">
        <view @click="back()">
          <image :src="z_imgPath + 'back.png'"></image>
          返回
        </view>
        <view class="hang1">发货记录</view>
      </view>
      <view class="qiehuan">
        <view @click="getlist(i + 1)" v-for="(v, i) in arr" :key="i">
          <view :class="show == i + 1 ? 'xzs' : 'wzs'">{{ v }}</view>
          <view class="qiehuan_line" v-if="show == i + 1">
            <image src="../../static/shouye/top.png"></image>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 内容 -->
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view
        @click="toorder(v.id)"
        class="xuyuan common_bg"
        v-for="(v, i) in listData"
        :key="i"
        v-if="listData.length > 0"
        :style="{
          'background-image': `url(${$img('/static/img/send_item_border.png')})`
        }"
      >
        <view class="xuyuan_head">
          <view>申请时间：{{ v.addtime }}</view>
          <view style="color: #fff" v-if="v.status == 1">待发货</view>
          <view style="color: #fff" v-if="v.status == 2">待收货</view>
          <view style="color: #fff" v-if="v.status == 3">已完成</view>
        </view>
        <view class="xuyuan_con">
          <view
            class="xuyuan_item common_bg"
            v-for="(a, b) in v.order_list"
            :key="b"
            :style="{
              'background-image': `url(${$img(
                '/static/img/send_prize_item_border.png'
              )})`
            }"
          >
            <view class="list_img">
              <image :src="a.goodslist_imgurl"></image>
              <view class="shang_title">
                <view class="type">
                  {{ a.shang_title }}
                </view>

                <view class="num">×{{ a.prize_num }}</view>
              </view>
              <!-- <view class="allNum">X{{a.prize_num}}</view> -->
            </view>
            <view class="xuyuan_item_2 flex_center hang1">
              <view class="hang1">{{ a.goodslist_title }}</view>
            </view>
          </view>
        </view>
        <view class="xuyuan_foot">
          <!-- <view
            class="qrsh"
            :style="
              'background: url(' +
              z_imgPath +
              'mine/detail_bg.png' +
              ') no-repeat 0 0 / 100% 100%;'
            "
            v-if="v.status == 1"
            @click="toorder(v.id)"
          >
            查看详情
          </view> -->

          <template v-if="v.status == 2">
            <!-- <view
              class="ckwl"
              @click="toorder(v.id)"
              :style="
                'background: url(' +
                z_imgPath +
                'mine/detail_bg.png' +
                ') no-repeat 0 0 / 100% 100%;'
              "
            >
              查看详情
            </view> -->
            <view
              class="ckwl common_bg"
              @click.stop="towuliu(v.id)"
              :style="{
                backgroundImage: `url(${$img('/static/img/send_ckwl.png')})`
              }"
            >
              <!-- 查看物流 -->
            </view>
            <view
              class="qrsh common_bg"
              @click.stop="quren(v.id)"
              :style="{
                backgroundImage: `url(${$img('/static/img/send_qrsh.png')})`
              }"
            >
              <!-- 确认收货 -->
            </view>
          </template>
          <!-- <view
            class="detail_gray"
            v-if="v.status == 3"
            @click="toorder(v.id)"
            :style="
              'background: url(' +
              z_imgPath +
              'mine/shouhuo_bg.png' +
              ') no-repeat 0 0 / 100% 100%;'
            "
          >
            查看详情
          </view> -->
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2,
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      arr: ['已申请', '已发货', '已完成'],
      show: 1,

      downOption: {
        auto: false
      },

      listData: []
    }
  },
  onLoad(e) {},
  methods: {
    back() {
      uni.navigateBack()
    },
    quren(e) {
      let that = this
      that.req({
        url: 'warehouse_send_confirm',
        data: {
          id: e
        },
        success(res) {
          if (res.status == 1) {
            uni.showToast({
              title: res.msg,
              icon: 'success',
              duration: 1500,
              success() {
                setTimeout(() => {
                  that.loadData(1)
                }, 1000)
              }
            })
          }
        }
      })
    },
    toorder(e) {
      uni.navigateTo({
        url: 'order?id=' + e
      })
    },
    towuliu(e) {
      uni.navigateTo({
        url: 'wuliu_detail?id=' + e
      })
    },
    getlist(v) {
      this.show = v
      this.listData = []
      this.mescroll.resetUpScroll()
    },

    downCallback() {
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      this.loadData(page.num)
    },
    loadData(pageNo) {
      let that = this
      that.req({
        url: 'warehouse_send_record',
        Loading: true,
        data: {
          page: pageNo,
          status: that.show
        },
        success(res) {
          that.mescroll.endByPage(res.data.data.length, res.data.last_page)
          if (pageNo == 1) {
            that.listData = res.data.data
          } else {
            that.listData = that.listData.concat(res.data.data)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.allNum {
  position: absolute;
  bottom: 0rpx;
  right: 0rpx;
  font-size: 22rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8rpx 0 0 8rpx;
  color: #fff;
  padding: 5rpx 10rpx;
}

.list_img .shang_title {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  /* width: 100%; */
  color: #333;
  font-size: 24rpx;
  /* font-family: 'zcq'; */
  text-align: left;
  padding: 4rpx 10rpx;
  box-sizing: border-box;
  /* border: 1px solid #000000; */
  width: 100%;
  display: flex;
  justify-content: space-between;

  .type {
    font-size: 22rpx;
    font-family: zihun147hao-xingyuanhei;
    font-weight: 400;
    color: #fff;
  }

  .num {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.list_img > image {
  width: 170rpx;
  height: 170rpx;
  border-radius: 10rpx 10rpx 0 0;
  // margin: 1rpx auto;
}

.list_img {
  /* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
  border-radius: 10rpx;
  box-sizing: border-box;
  width: 170rpx;
  height: 170rpx;
  position: relative;
}

/* .detail_gray {
		background: #96FFFE;
		color: #222222;
	}

	.ckwl {
		border: 1rpx solid #96FFFE;
		color: #96FFFE;
		margin-right: 20rpx;
	}

	.qrsh {
		background: #96FFFE;
		color: #222222;
	} */

.xuyuan_foot > view {
  width: 206rpx;
  height: 84rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-family: YouSheBiaoTiHei;
  margin-right: 20rpx;
}

.xuyuan_foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // padding-top: 20rpx;
  padding: 20rpx 0 0;
  // width: 690rpx;
  font-size: 28rpx;
}

.xuyuan_item_2 {
  color: #ffffff;
  font-size: 24rpx;
  width: 100%;
  margin-top: 4rpx;
  padding: 0 10rpx;
}

.xuyuan_item > image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx 10rpx 0 0;
}

.xuyuan_item {
  width: 229rpx !important;
  height: 240rpx;
  box-sizing: border-box;
  padding: 18rpx 20rpx 0;
}

.xuyuan_con {
  display: flex;
  margin: 14rpx auto 0;
  width: 630rpx;
  box-sizing: border-box;
  // border-bottom: 1rpx solid #5c5c5c;
  padding-bottom: 20rpx;
  overflow-x: scroll;
}

.xuyuan_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  color: #fff;
}

.xuyuan {
  width: 690rpx;
  // height: 422rpx;
  margin: 0 auto 24rpx;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  box-sizing: border-box;
  /* background: #11141D; */
  /* border: 1px solid #9E9E9E; */
  /* border-radius: 10rpx; */
  /* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
}

.qiehuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  width: 400rpx;
}

.qiehuan_line {
  margin: -10rpx auto;
  width: 30rpx;
  height: 20rpx;
  border-bottom: 4rpx solid #70ede8;
  border-radius: 2rpx;
}

.qiehuan_line > image {
  width: 30rpx;
  height: 20rpx;
}

.qiehuan > view {
  flex: 1;
  text-align: center;
}

.wzs {
  font-size: 34rpx;
  color: rgba(255, 255, 255, 0.6);
}

.xzs {
  font-size: 34rpx;
  color: #ffffff;
}

.header {
  width: 750rpx;
  /* height: 176rpx; */
  padding-bottom: 30rpx;
  background: #222222;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  position: fixed;
  /* #ifdef MP */
  top: 0;
  /* #endif */
  /* #ifndef MP */
  top: 88rpx;
  /* #endif */
  z-index: 15;
}

.content {
  width: 100vw;
  min-height: 100vh;
  // padding-top: calc(var(--status-bar-height) + 200rpx);
  box-sizing: border-box;
  color: #fff;
  .head {
    position: fixed;
    top: 0;
    z-index: 20;

    .header_title {
      height: 70rpx;
      line-height: 70rpx;
      width: 100%;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;

      > view:nth-of-type(1) {
        display: flex;
        align-items: center;
      }

      > view:nth-of-type(2) {
        width: 520rpx;
        text-align: center;
        /* margin: auto; */
      }

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}

.tab-list {
  display: flex;
  padding: 30rpx;

  .tab-list-item {
    margin-right: 40rpx;
    position: relative;

    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;

    .arrow {
      position: absolute;
      left: 50%;
      bottom: -28rpx;
      transform: translateX(-50%);
      width: 40rpx;
      height: 20rpx;
    }

    &.active {
      text-shadow: 0 0 10rpx #ba39ff;
    }
  }
}
</style>
